<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<TITLE>实时更新数据</TITLE>
		<script type="text/javascript" src="static/js/jquery.js"></script> 
		<script type="text/javascript" src="static/js/highcharts.js"></script>
		<script type="text/javascript" src="static/js/websocket.js"></script> 
		<script type="text/javascript">
			var series_
			var arr = new Array()
			var wsUri = "ws://localhost:8081/ws"
			var showMax = 110
			init()


			function init() {
			    // 初始化数据
			    {{range $k,$v := .initData }}
			    	arr[ {{$k}} ] = {{ $v }} 
				{{end}}

				connect(wsUri, recvMsg)
			}

			function setShowMax() {
				let v = document.getElementById("input-show-max").value
				try{
					let num = Number(v)
					if (num < 10) {
						alert("不能小于10")
						return
					}
					showMax = num
				}catch(err){
					console.log(err)
				}
			}

			function recvMsg(buff) {
				myAddPoint(DecodeUint32(buff))
			}

			function DecodeUint32(buff) {
				try{
					let num = Number(buff[3]) << 24
					num += Number(buff[2]) << 16
					num += Number(buff[1]) << 8
					num += Number(buff[0])
					return num
				}catch(err) {
					console.log(err)
					return 0
				}
			}
			
			function myAddPoint(value) {
			    // 当节点超过100个的时候
			    if (series_.data.length < showMax) {
			        // 增加一个点 不删除最后一个
			        series_.addPoint([(new Date()).getTime(), value], true, false);
			    } else {
			        // 增加一个点 删除最后一个节点
			        series_.addPoint([(new Date()).getTime(), value], true, true);
			    }
			}
			
			$(function() {
			    $(document).ready(function() {
			        Highcharts.setOptions({
			            global: {
			                useUTC: false
			            }
			        });
			
			        var chart;
			        $('#container').highcharts({
			            chart: {
			                type: 'spline',
			                animation: Highcharts.svg,
			                // don't animate in old IE               
			                marginRight: 10,
			                events: {
			                    load: function() {
			                        // set up the updating of the chart each second             
			                        series_ = this.series[0];
			                        //var series = this.series[0];  
			                        //setInterval(function() {                                    
			                        //var x = (new Date()).getTime()// current time         
			                        //myAddPoint()
			                        //}, 1000);                                                   
			                    }
			                }
			            },
			            title: {
			                text: '动态走势图'
			            },
			            xAxis: {
			                type: 'datetime',
			                tickPixelInterval: 100
			            },
			            yAxis: {
			                title: {
			                    text: '动态走势图'
			                },
			                plotLines: [{
			                    value: 0,
			                    width: 1,
			                    color: '#808080'
			                }]
			            },
			            tooltip: {
			                formatter: function() {
			                    return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + Highcharts.numberFormat(this.y, 1);
			                }
			            },
			            legend: {
			                enabled: false
			            },
			            exporting: {
			                enabled: false
			            },
			            series: [{
			                name: 'Random data',
			                data: (function() {
			                    // generate an array of random data                             
			                    var data = [],
			                    time = (new Date()).getTime(),
			                    i = -arr.length + 1,
			                    j = 0;
			                    for (; i <= 0; i++) {
			                        data.push({
			                            x: time + i * 5000,
			                            y: arr[j++]
			                        });
			                    }
			                    return data;
			                })()
			            }]
			        });
			    });
			
			});               
		</script>
	</HEAD>

	<BODY>
		<input type="number" min="10" placeholder="请输入显示节点个数" id="input-show-max">
		<button onclick="setShowMax()">设定</button>
		<div id="container" style="width:100%;height:100%;margin:0 auto;"></div>
		<div style="text-align:center;clear:both;"></div>
	</BODY>
</HTML>
